<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <title>沃沃柒-安装</title>
    <link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.min.css"/>
    <link rel="stylesheet" href="https://ks3-cn-beijing.ksyun.com/vform3/render.style.css?t=20220129">
    <style type="text/css">
        /* Basic Grey */   /* class名称为basic-grey*/
        .basic-grey {
            margin-left:auto;
            margin-right:auto;
            max-width: 500px;
            background: #F7F7F7;
            padding: 25px 15px 25px 10px;
            font: 12px Georgia, "Times New Roman", Times, serif;
            color: #888;
            text-shadow: 1px 1px 1px #FFF;
            border:1px solid #E4E4E4;
        }
        .basic-grey h1 {
            font-size: 25px;
            padding: 0px 0px 10px 40px;
            display: block;
            border-bottom:1px solid #E4E4E4;
            margin: -10px -15px 30px -10px;;
            color: #888;
        }
        .basic-grey h1>span {
            display: block;
            font-size: 11px;
        }
        .basic-grey label {
            display: block;
            margin: 0px;
        }
        .basic-grey label>span {
            float: left;
            width: 20%;
            text-align: right;
            padding-right: 10px;
            margin-top: 10px;
            color: #888;
        }
        .basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey input[type="password"], .basic-grey textarea, .basic-grey select {
            border: 1px solid #DADADA;
            color: #888;
            height: 30px;
            margin-bottom: 16px;
            margin-right: 6px;
            margin-top: 2px;
            outline: 0 none;
            padding: 3px 3px 3px 5px;
            width: 70%;
            font-size: 12px;
            line-height:15px;
            box-shadow: inset 0px 1px 4px #ECECEC;
            -moz-box-shadow: inset 0px 1px 4px #ECECEC;
            -webkit-box-shadow: inset 0px 1px 4px #ECECEC;
        }
        .basic-grey textarea{
            padding: 5px 3px 3px 5px;
        }
        .basic-grey select {
            background: #FFF url('down-arrow.png') no-repeat right;
            background: #FFF url('down-arrow.png') no-repeat right);
            appearance:none;
            -webkit-appearance:none;
            -moz-appearance: none;
            text-indent: 0.01px;
            text-overflow: '';
            width: 70%;
            height: 35px;
            line-height: 25px;
        }
        .basic-grey textarea{
            height:100px;
        }
        .basic-grey .button {
            background: #E27575;
            border: none;
            padding: 10px 25px 10px 25px;
            color: #FFF;
            box-shadow: 1px 1px 5px #B6B6B6;
            border-radius: 3px;
            text-shadow: 1px 1px 1px #9E3F3F;
            cursor: pointer;
        }
        .basic-grey .button:hover {
            background: #CF7A7A
        }
    </style>
</head>
<body>

<div id="app">
    <form action="/index/index/step1" method="post" class="basic-grey">
        <h1>数据库配置
            <span>请填写您的数据库配置</span>
        </h1>
        <label>
            <span>Hostname</span>
            <input id="hostname" type="text" name="hostname" :value="formData.hostname" placeholder="请输入数据库远程地址" />
        </label>
        <label>
            <span>Hostport</span>
            <input id="hostport" type="text" name="hostport" :value="formData.hostport" placeholder="请输入数据库远程端口" />
        </label>
        <label>
            <span>Username :</span>
            <input id="username" type="text" name="username" :value="formData.username" placeholder="请输入数据库用户" />
        </label>
        <label>
            <span>Password</span>
            <input id="password" type="password" name="password" :value="formData.password" placeholder="请输入数据库密码" />
        </label>
        <label>
            <span>Database :</span>
            <input id="database" type="text" name="database" :value="formData.database" placeholder="请输入数据库用户" />
        </label>
        <label>
            <span>Prefix :</span>
            <input id="prefix" type="text" name="prefix" :value="formData.prefix" placeholder="请输入表名前缀" />
        </label>
        <label>
            <span>&nbsp;</span>
            <input type="submit" class="button" value="提交" />
        </label>
    </form>
</div>

<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.30/vue.global.min.js"></script>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.full.min.js"></script>
<script src="https://ks3-cn-beijing.ksyun.com/vform3/render.umd.js?t=20220129"></script>
<script>
    const {createApp} = Vue;
    const app = createApp({
        data() {
            return {
                formData: {
                    hostname: '127.0.0.1',
                    hostport: '3306',
                    username: 'root',
                    password: 'root',
                    database: 'plug',
                    prefix: 'v_',
                    phone: '18800000000',
                },
                optionData: {}
            }
        },
        methods: {
            submitForm: function () {
                this.$refs.vFormRef.getFormData().then(function (formData) {
                    // Form Validation OK
                    alert(JSON.stringify(formData))
                }).catch(function (error) {
                    // Form Validation Failed
                    alert(error)
                })
            }
        }
    });
    app.use(ElementPlus)
    app.use(VFormRender)
    app.mount("#app");
</script>
</body>
</html>